<template>
  <div class="editor">
    <el-dialog
      title="添加富文本"
      :visible.sync="editorVisible"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <VueEditor
        style="width: 100%;height:100%"
        @image-added="handleImageAdded"
        @focus="onEditorFocus"
        @blur="onEditorBlur"
        @selection-change="onSelectionChange"
        :editorToolbar="customToolbar"
        v-model="content"
        useCustomImageHandler
      ></VueEditor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
  name: "editorDialog",
  data() {
    return {
      customToolbar: [
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" },
        ],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ background: [] }, { color: [] }],
        [{ header: ["1", "2", "3", "4", "5", "6"] }],
        ["image", "link"],
        ["blockquote"],
        // ["code"],
        ["code-block"],
        ["video"],
        // ["underline"],
        ["clean"],
      ],
      editorVisible: false,
      content: "<h1>点击编辑内容</h1>",
    };
  },
  components: {
    VueEditor,
  },
  methods: {
    // 自定义上传图片
    // 上传的图片直接以base64位存在界面，当上传的图片较多时，数据太大，解决方法使用下面方法
    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      // this.$axios({
      //   url:`${this.baseUrl}/api/file/uploadFile`,
      //   method: 'POST',
      //   headers: {
      //     token: this.isToken   //此处的token是我传过去的
      //   },
      //   data: formData
      // })
      //   .then(res => {
      //   //   let url = [`${this.baseUrl}${res.data.data.originalPath}`];
      //     let url = res.data.data.originalPath
      //     console.log(`${this.baseUrl}${url}`)
      //       Editor.insertEmbed(cursorLocation, 'image', `${this.baseUrl}/res${url}`)
      //     resetUploader()
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.content = "<h1>点击编辑内容</h1>";
          done();
        })
        .catch((_) => {});
    },
    add() {
      console.log(this.content);
    },
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },

    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },

    onSelectionChange(range) {
      console.log("selection change!", range);
    },
  },
};
</script>
